<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=basePath %>leyuiyc/css/font.css">
    <link rel="stylesheet" href="<%=basePath %>leyuiyc/css/xadmin.css">
    <script type="text/javascript" src="<%=basePath %>leyuiyc/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath %>leyuiyc/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<div class="layui-form-item" id="div01" style="position: absolute;top: 430px;left: 415px;">
    <button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
            id="editimg1">修改图片
    </button>

</div>
<div id="imgDiv1" style="border:1px solid black;height:320px;width:560px;position: absolute;top: 75px;left: 340px;float: left">
    <img class="imgEdit" alt="" id="img1" src="${infoPicPath}">
</div>
<div id="imgDiv2" style="height:320px;width:560px;position: absolute;top: 75px;left: 625px; display: none">
    <img class="imgEdit" alt="" id="img2" src="">
</div>
<form class="layui-form">


    <div class="layui-form-item">
        <input class="fileupload-input" id="picpath1" type="hidden" name="picpath1" value="${infoPicPath}"/>
        <input class="fileupload-input" id="picpath2" type="hidden" name="picpath2" value=""/>
        <input class="fileupload-input" id="goodsId" type="hidden" name="goodsId" value="${goodsId}"/>
        <input class="fileupload-input" id="mark" type="hidden" name="mark" value="infoPic"/>
    </div>

    <div class="layui-form-item" id="div02" style="position: absolute;top: 430px;left: 520px;">

        <button class="layui-btn layui-btn-lg layui-btn-radius" style="display: none"
                lay-filter="edit" lay-submit="" id="editimg2">保存修改
        </button>
    </div>
    <div class="layui-form-item" id="div03" style="position: absolute;top: 430px;left: 670px;">
        <button type="button" class="layui-btn layui-btn-lg layui-btn-radius  layui-btn-warm"
                id="exit">返 &emsp;&emsp; 回
        </button>
    </div>
</form>


<script type="text/javascript">
    layui.config({
        base: '<%=basePath%>/layui/lay/mymodules/'
    }).use(["element", "layer", 'croppers', "form", "table", "jquery"], function () {
        var layer = layui.layer;
        var form = layui.form;
        var croppers = layui.croppers;
        var $ = layui.jquery;


        croppers.render({
            elem: '#editimg1'
            , saveW: 560     //保存宽度
            , saveH: 320
            , mark: 560 / 320    //选取比例
            , area: '900px'  //弹窗宽度
            , url: "Typgl/uploadPictures.do"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            , done: function (data) { //上传完毕回调
                var mark = $('#mark').val()
                // console.log(data);
                $("#img2").attr('src', data);
                $("#picpath2").attr('value', data);

                $("#imgDiv2").css("display", "block")
                $("#editimg1").css("display", "none")
                $("#editimg2").css("display", "block")

                if (mark === 'infoPic') {
                    $("#div01").css("top", "500px")
                    $("#div02").css("left", "415px")
                    $("#imgDiv1").css("top", "75px")
                    $("#imgDiv1").css("left", "25px")
                }
            }
        });

        $(document).on('click', '#exit', function () {
            // 获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            //关闭当前frame
            parent.layer.close(index);
        })


        var goodsId = $('#goodsId').val();
        //监听提交
        form.on('submit(edit)', function (data) {
            $.ajax({
                url: "goodsDetail/updatePic.do?goodsId="+goodsId,
                method: "post",
                data: data.field,
                dataType: "json",
                success: function (data) {
                    if (data.statusCode === '200') {
                        layer.msg(data.message, {icon: 6},
                            function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                //关闭当前frame
                                parent.layer.close(index);
                                // parent.location.reload(); //刷新父页面
                            });
                    } else {
                        layer.msg(data.message, {icon: 5, time: 1000});
                    }
                }
            })
            return false;
        });


    });
</script>

</body>

</html>
